<template>
  <div>
      <myheader></myheader>
        <!-- 表单盒子 -->
        <div class='form'>
            <van-form validate-first>
            <van-field
                v-model="username"
                name="username"
                label="用户名："
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
                label-align = 'center'
            />
            <van-field
                v-model="password"
                name="password"
                label="密  码："
                placeholder="密码"
                :rules="[{ pattern:is_password, message: '密码至少有一个字母或数字 并且大于4位' }]"
                label-align = 'center'
            />
            <van-field
                v-model="repassword"
                name="repassword"
                label="确认密码："
                placeholder="确认密码"
                :rules="[{ validator:re_password, message: '请确认密码' }]"
                label-align = 'center'
            />
            <van-field
                v-model="phone"
                name="phone"
                label="电话号码："
                placeholder="电话号码"
                :rules="[{ pattern:is_phone, message: '请填写正确电话号码' }]"
                label-align = 'center'
            />
            <van-field
                v-model="email"
                center
                clearable
                name="is_mail"
                label="邮  箱："
                placeholder="邮箱"
                :rules="[{ pattern:is_email, message: '请填写正确邮箱' }]"
                >
            <template #button>
                <van-button size="small" type="primary" @click="send_email">发送验证码</van-button>
            </template>
            </van-field>
            <p class ='code'>
                <van-field 
                    v-model="code"
                    type="tel"
                    label="验证码："
                    placeholder="验证码"
                    :rules="[{ validator:is_code, message: '请输入正确验证码'}]"
                 />
                <!-- 允许输入正整数，调起纯数字键盘 -->
            </p>
            <van-button square block type="info"  @click="onSubmit">
            注册
            </van-button>
            </van-form>
        </div>
  </div>    
</template>

<script>
import myheader from  './myheader.vue'
import axios from 'axios'
export default {
    data(){
        return{
            username:'',
            password:'',
            repassword:'',
            email:'',
            phone:'',
            code:'',
            // 返回的code
            re_code:'1234',
            is_phone:/^1[365789]\d{9}$/,
            is_password:/^(?:(?=.*[a-zA-Z])(?=.*[0-9])).{4,}$/,
            is_email:/^.*@(\w*)\.(com|net|cn)$/,
        }
    },
    //注册组件标签
    components:{
        'myheader':myheader,
    },
    methods:{
        send_email(){
            var formdata = new FormData()
            formdata.append('email',this.email)
            axios.post('http://127.0.0.1:5000/send_mail/',formdata).then(res=>{
                if(res.data.code==200){
                    alert(res.data.msg)
                    this.re_code = res.data.Captcha
                }
            })
        },
        is_code(val){
            return this.re_code==val
        },
        re_password(val) {
            return this.password==this.repassword;
        },
        onSubmit(){
            var register_formdata = new FormData()
            register_formdata.append('username',this.username)
            register_formdata.append('password',this.password)
            register_formdata.append('phone',this.phone)
            register_formdata.append('email',this.email)
            register_formdata.append('code',this.code)

            axios.post('http://127.0.0.1:5000/register/',register_formdata).then(res=>{
                alert(res.data.msg)
                if(res.data.code==200){
                    window.location.href='/login'
                }
            })
        }
    }
}
</script>

<style>
 
.form{
    text-align:center;
    margin:0px auto; 
    margin-top: 150px;
    width: 350px;
}
.myfooter{
    position:fixed;
    bottom:0;
    width:100%;
}
.code{
    font-size: 14px;
    color: #323233;
    font-weight:510;
}
</style>